<template>
  <div class="basic_info">
    <div class="info_operation_btn">
      <div class="btn_left">
        <el-button type="primary" @click="onShowAdd()">新增(N)</el-button>
        <el-button
          :disabled="!buttonsPermissions.ShanChu"
          :class="!buttonsPermissions.ShanChu ? 'disabled_button' : ''"
          @click="onBatchDelete"
        >删除</el-button>
        <!-- 导入导出 -->
        <el-button 
        :disabled="!buttonsPermissions.DaoRu"
         @click="importExcel">导入
        </el-button>
        <!-- @click="handleExportXls('客户物料编码')" -->
        <el-button
          :disabled="!buttonsPermissions.DaoChu"
          :class="!buttonsPermissions.DaoChu ? 'disabled_button' : ''"
          @click="exportExcel(1)"
        >导出</el-button>
      </div>
      <div class="btn_right">
        <div class="custom_item">
              <div class="item_title">往来单位</div>
              <el-tooltip
                effect="dark"
                :content="getDictTextById(gysOptions, queryData.companyId, 'companyName')"
                :enterable="false"
                placement="bottom-start"
                :disabled="this.getHideToolTipById(gysOptions, queryData.companyId, 'companyName')"
              >
                <div class="custom_select_head">
                  <!-- companyId -->
                  <el-select
                    v-model="queryData.companyId"
                    style="width:100%;"
                    filterable
                    ref="gongyingshang"
                    @visible-change="(value) => handleFilterMethod('', 'companyName')"
                    :filter-method="(value) => handleFilterMethod(value, 'companyName')"
                    @change="(id) => companyNameChange(id)"
                  >
                    <el-option
                      v-for="item in gysOptions"
                      :key="item.id"
                      :label="item.companyName"
                      :value="item.id"
                    ></el-option>
                    <el-option key label value>
                    <div class="custom_add" @click.stop="onShowSupplierAdd">
                      <i class="el-icon-plus"></i>
                      <span>新增</span>
                    </div>
                    </el-option>
                  </el-select>
                  <div class="custom_more">
                    <i class="el-icon-more" @click.stop="onShowSupplier"></i>
                  </div>
                </div>
              </el-tooltip>
            </div>
            <!-- 编码 -->
            <div class="custom_item">
              
              <div class="item_title">往来单位编码</div>
               <el-tooltip
                effect="dark"
                :content="queryData.companyNumber"
                :enterable="false"
                placement="bottom-start"
                :disabled="getLength()"
              >
                <div class="custom_select_head">
                  <el-input type="text" v-model="queryData.companyNumber" placeholder="请输入"/>
                </div>
              </el-tooltip>
            </div>
        <el-input v-model="queryData.keyword"  class="normal-input" placeholder="请输入商品名称\编码\规格" />
        <el-button type="primary" @click="queryClick">搜索</el-button>
        <el-button @click="onRefresh">刷新</el-button>
        <i @click="onShowColumn()" class="set_up el-icon-s-tools"></i>
      </div>
    </div>
    <div class="info_content_div">
      <div class="div_table">
        <div class="div_screen">
          <div class="screen_left">
            <p class="tips">企业和客户针对同一商品有不同的编码规则，这里可以管理企业和客户对不同物料编码的对应关系。</p>
          </div>
        </div>
        <div class="table_content">
          <el-table
            ref="tableList"
            highlight-current-row
            :header-cell-style="{
            color: '#666666',
            textAlign: 'center',
            height: '30px',
            borderColor: '#dddddd',
          }"
            :cell-style="{ textAlign: 'center' }"
            :data="tableData.records"
            height="100%"
            style="width: 100%"
            :border="true"
            v-loading="loading"
            @selection-change="handleSelectionChange"
             @onHandleDrag="onDragColumn"
          >
            <el-table-column type="selection"></el-table-column>
            <el-table-column :resizable="false" label="序号" type="index" width="50"></el-table-column>
            <template v-for="(item, index) in columnData">
              <el-table-column
                :show-overflow-tooltip="true"
                :key="index"
                :label="item.zidingyiName ? item.zidingyiName : item.morenName"
                v-if="item.zidingyiState"
                :prop="item.props"
                :sortable="item.sortable"
                min-width="120px"
                :width="item.props == 'xh' ? '50px' :item.props=='goodsName'?'300px': item.cellWidth"
              >
                <template slot-scope="scope">
                  <span
                    v-if="item.props == 'purchaseOrderPrice'"
                  >{{ $formatMoney(scope.row[item.props]) }}</span>
                  <span v-if="item.props == 'goodsName'" style="width: 100%; white-space: normal;
  word-wrap: break-word;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; text-align: left;">{{ scope.row[item.props] }}</span>
                  <span v-else>{{ scope.row[item.props] }}</span>
                </template>
              </el-table-column>
            </template>
            <el-table-column
              label="操作"
              :resizable="false"
              v-if="buttonsPermissions.XiuGai"
            >
              <template slot-scope="scope">
                <span
                  v-if="buttonsPermissions.XiuGai"
                  @click="onEditRow(scope.row)"
                  class="bianji"
                >编辑</span>
                
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="total_record">
          <p>合计</p>
          <p>共{{ tableData.total }}条记录</p>
        </div>
        <div class="table_pagination">
          <div class="pagination_div">
            <el-pagination
              background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[20, 50, 100, 200]"
              :page-size="pagesize"
              layout="jumper, prev, pager,next, sizes"
              :total="tableData.total"
            ></el-pagination>
          </div>
        </div>
      </div>
    </div>
    <!-- 列配置弹框 -->
    <CConfiguration
      ref="setColumnRef"
      :columnDataArr="columnData"
      :defaultColumnDataArr="defaultColumnData"
      orderType="采购订单记录"
      @onSaveColumn="onSaveColumn"
    ></CConfiguration>
    <!-- 新增客户物料编码弹框 -->
    <DialogMaterialsAdd
      ref="materialsAddRef"
      :newData="newData"
      @onAddSubmit="onAddSupplier"
      @queryClick="queryClick"
    ></DialogMaterialsAdd>
    <!-- @dialogVisibleClose="onCloseAddSupplier" -->
    <!-- 提醒弹框 -->
    <PopupReminder ref="reminderRef" :tipsData="tipsData" @onConfirm="onYes" @onCancel="onCancel"></PopupReminder>
    <!-- 选择客户弹框  -->
    <DialogSupplier ref="supplierRef" @onSelectSupplier="onSelectSupplier"></DialogSupplier>
    <!-- 新增客户弹框 -->
    <DialogSupplierAdd ref="supplierAddRef" @onAddSubmit="onAddSupplier"></DialogSupplierAdd>
    <!-- 导入 -->
    <!-- :storehouseId="queryData.xghOutStorehouseId" -->
    <DialogImport
      ref="daoru"
      :titles="columnData"
      :isGoods="true"
      url="/xghCustomerMaterialCode/xghCustomerMaterialCode/importExcel"
      @importData="importData"
      @downloadTemplate="exportExcel(0)"
    ></DialogImport>
    <!-- 成功弹框 -->
    <PopupSuccess ref="successRef" :tipsData="tipsData"></PopupSuccess>
    <PopupImportSuccess ref="successImportRef" :tipsData="tipsData"></PopupImportSuccess>
    <!-- 打印 -->
    <dialog-print ref="print"></dialog-print>
  </div>
</template>

<script>
import PopupReminder from '@/views/components/popupReminder'
import CConfiguration from '@/components/c_column/columnConfiguration1'
import DialogSupplier from '../../components/dialogSupplier'
import DialogSupplierAdd from '../../components/dialogSupplierAdd'
import DialogMaterialsAdd from '../../components/dialogMaterialsAdd'
import PopupSuccess from '../../components/popupSuccess'
import PopupImportSuccess from '../../components/popupImportSuccess'
/**打印 */
import dialogPrint from '@/views/components/dialogPrintRecord'
import { getAction, postAction,deleteAction,downPostFile } from '@/api/manage'
// 导入调用处理权限数据方法
import { handlePermissions, handleOtherPerms, handlePagePermissions } from '@/utils/index'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import { getLikeCompanyId } from '../../../utils'
import { ACCOUNT_BOOK } from '@/store/mutation-types'
import Vue from 'vue'
/*导入弹窗 */
import DialogImport from '@/components/c_Import/index1'
export default {
  name: 'purchaseOrder',
  components: {
    PopupReminder,
    CConfiguration,
    DialogSupplier,
    DialogSupplierAdd,
    DialogMaterialsAdd,
    dialogPrint,
    DialogImport,
    PopupSuccess,
    PopupImportSuccess,
  },
  mixins: [JeecgListMixin],
  computed: {
    buttonsPermissions () { return handlePermissions('采购订单记录') },
    printPermissions () {
      return handleOtherPerms('单据可多次打印')
    },
  },
  created () {
    this.getData()
  },
  watch: {
  },
  data () {
    return {
      loading:true,
      newData: {}, // 新增客户物料编码数据
      // 供应商
      gysOptions: [],
      // 传递给弹框的数据
      tipsData: {
        tipsState:'',
        tipsWords:'',
        tipsMark: '',
      },
      batchData: [], // 存储多选的数据
      // 入货仓库
      ckOptions: [],
      // 经手人
      jsrOptions: [],
      // 单据状态:0.待审核5.审核通过10.作废15.反审20.红冲25.终止30.完成
      djztOptions: [
        {
          value: '-1',
          label: '全部',
        },
        {
          value: '5',
          label: '已审核',
        },
        {
          value: '0',
          label: '未审核',
        },
        {
          value: '10',
          label: '已作废',
        },
        {
          value: '20',
          label: '已红冲',
        },
      ],
      // 查询条件数据
      orderNumberParam: '', // 单据编号/往来单位
      queryData: {
        companyId: '', // 客户id
        companyName:'',
        companyNumber:'',
        keyword:''

      },
      // 月份选择
      monthValue: '本月',
      monthOptions: ['今日', '本周', '本月', '本年'],
      isShowDate: true, // 是否显示选择时间组件
      nowDate: [],
      // 表格数据
      tableData: {},
      // 列配置数据
      defaultColumnData: [],
      columnData: [
        {
          morenName: '往来单位名称',
          isRequired: true,
          zidingyiName: '',
          morenState: true,
          cellWidth: '150px',
          zidingyiState: true,
          noModify: false,
          props: 'companyName',
        },
        {
          morenName: '往来单位编码',
          zidingyiName: '',
          morenState: true,
          cellWidth: '150px',
          zidingyiState: true,
          noModify: false,
          props: 'companyNumber',
        },
        {
          morenName: '外部商品名称',
          isRequired: true,
          zidingyiName: '',
          morenState: true,
          cellWidth: '150px',
          zidingyiState: true,
          noModify: false,
          props: 'outerGoodsName',
        },
        {
          morenName: '外部商品编码',
          zidingyiName: '',
          morenState: true,
          cellWidth: '150px',
          zidingyiState: true,
          noModify: false,
          props: 'outerGoodsNumber',
        },
        {
          morenName: '外部商品规格',
          zidingyiName: '',
          morenState: true,
          cellWidth: '150px',
          zidingyiState: true,
          noModify: false,
          props: 'outerGoodsSpecs',
        },
        {
          morenName: '外部单位',
          zidingyiName: '',
          morenState: true,
          cellWidth: '120px',
          zidingyiState: true,
          noModify: false,
          props: 'outerGoodsUnit',
        },
        {
          morenName: '商品名称',
          isRequired: true,
          zidingyiName: '',
          morenState: true,
          cellWidth: '150px',
          zidingyiState: true,
          noModify: false,
          props: 'goodsName',
        },
        {
          morenName: '商品编码',
          zidingyiName: '',
          morenState: true,
          cellWidth: '150px',
          zidingyiState: true,
          noModify: false,
          props: 'goodsNumber',
        },
        {
          morenName: '商品单位',
          zidingyiName: '',
          morenState: true,
          cellWidth: '120px',
          zidingyiState: true,
          noModify: false,
          props: 'goodsUnit',
        },
        {
          morenName: '商品规格',
          zidingyiName: '',
          morenState: true,
          cellWidth: '150px',
          zidingyiState: true,
          noModify: false,
          props: 'goodsSpecs',
        },
      ],
      pagesize: 20, //每页的数据条数
      currentPage: 1, //默认开始页面
      updateId: '', // 修改列配置时返回的id
      url: {
        listUrl: '/xghCustomerMaterialCode/xghCustomerMaterialCode/list',
        api: '客户物料编码',
        exportXlsUrl: '/xghCustomerMaterialCode/xghCustomerMaterialCode/exportXls'
      }
    }
  },
  mounted () {

  },
  methods: {
    // 解决编码length为null问题
    getLength(){
      if(String(this.queryData.companyNumber).length < 6){
        return true
      }else{
        return false
      }
    },
    companyNameChange(id){
      const option = this.gysOptions.find(item => item.id === id);
      if (option) {
        console.log("option",option);
        const { companyName, companyNumber } = option;
        this.queryData.companyName = companyName
        this.queryData.companyNumber = companyNumber
        // this.queryClick()
      }
    },
    // 列宽发生变化时触发
    onDragColumn(val) {
      this.$setColumn.editColumn(this.url.api, this.TableConfig.columnData, this.updateId)
    },
    // 导入
    importExcel() {
      this.$refs.daoru.dialogVisible = true
    },
    importData (res) {
      this.tipsData.tipsWords = res.message
      this.$refs.successImportRef.dialogVisible = true
      this.getTableData()
    },
    // 触发表格修改按钮
    onEditRow(val) {
      console.log("编辑val",val)
      var that = this
      // 获取详情
      getAction('/xghCustomerMaterialCode/xghCustomerMaterialCode/queryById', {
        id: val.id,
      }).then((res) => {
        if (res.code === 200) {
          console.log("编辑res",res)
          this.$refs.materialsAddRef.reloadData(res.result)
          this.$refs.materialsAddRef.isEdit = true
          this.$refs.materialsAddRef.tableDisabled = false
          this.$refs.materialsAddRef.dialogVisible = true
        } else {
          this.$elMessage({
            showClose: true,
            message: res.message,
            type: 'error',
            iconClass: 'el-icon-warning-outline',
            duration: 3000,
          })
        }
      })
    },
    // 触发表格多选按钮
    handleSelectionChange (val) {
      this.batchData = val
    },
    // 批量删除
    onBatchDelete () {
      if (this.batchData.length) {
        this.tipsData.tipsState = 'delete'
        this.tipsData.tipsWords = '确定要删除此信息吗?'
        this.tipsData.tipsMark = 'onBatchDelete'
        this.$refs.reminderRef.dialogVisible = true
      } else {
        this.$elMessage({
          showClose: true,
          message: '请先选择需要删除的数据！',
          type: 'error',
          iconClass: 'el-icon-warning-outline',
          duration: 3000,
        })
      }
    },
    // 提醒弹框取消后操作
    onCancel(mark) {
    },
    // 弹框确认
    async onYes (mark) {
      if (mark == 'onBatchDelete') {
        let ids = []
        this.batchData.forEach((item) => {
          ids.push(item.id)
        })
        deleteAction('/xghCustomerMaterialCode/xghCustomerMaterialCode/deleteBatch', {
          ids: ids.toString(),
        }).then((res) => {
          if (res.code == 200) {
            this.$elMessage.success(res.message)
            this.getTableData()
          } else {
            this.$elMessage.error(res.message)
          }
        })
      } 
    },
    handleShortcutKeyAdd () {
      this.onShowAdd()
    },
    // 初始化获取数据
    getData () {
      this.getGysStorage() // 获取客户信息数据
      // this.getWarehouseData() // 获取仓库信息数据
      // this.getStaffData() // 获取业务员信息数据
      this.selectTitle()
      this.queryClick()
    },
    // 初始化查询列配置值
    async selectTitle () {
      let obj = await this.$setColumn.selectColumn(this.url.api)
      console.log(obj);
      if (obj.code === 200) {
        this.updateId = obj.updateId
        this.columnData = obj.columnData
        console.log("obj.columnData",obj.columnData)
      } else if (obj.code === 500) {
        let id = await this.$setColumn.addColumn(this.url.api, this.$options.data().columnData)
        this.updateId = id
      }
    },
    // 修改列配置后保存修改后的值
    async onSaveColumn (value) {
      this.columnData = value
      let res = await this.$setColumn.editColumn(this.url.api, this.columnData, this.updateId)
      if (res.code == 200) {
        this.$elMessage.success(res.message)
      } else {
        this.$elMessage.error(res.message)
      }
    },
    queryClick () {
      console.log("刷新列表")
      this.currentPage = 1
      this.getTableData()
    },
    // 获取表格信息数据
    async getTableData () {
      this.loading = true
        let accountBook = Vue.ls.get(ACCOUNT_BOOK)
      console.log("accountBook",accountBook)
      let accountBookId = accountBook && accountBook.id
      console.log("accountBookId",accountBookId)
      let data = {
        ...this.queryData,
        accountBookId:accountBookId,
        pageSize: this.pagesize,
        pageNo: this.currentPage,
      }
      const res = await getAction(this.url.listUrl, data)
      this.loading = false
      if (res.code !== 200) {
        return this.$elMessage.error('获取数据失败！')
      }
      this.tableData = res.result
    },
    // 供应商
    getGysStorage () {
      getAction('/xghCompany/xghCompany/listNoPage', {}).then((res) => {
        if (res.code === 200) {
          this.gysOptions = res.result
          this.totalCompanys = res.result
        } else {
          this.$elMessage.error(res.message)
        }
      })
    },
    // 打开新增数据弹框
    onShowAdd() {
      if (!this.buttonsPermissions.XinZeng) {
        this.$elMessage.warning('未拥有新增权限！')
        return
      }
      this.$refs.materialsAddRef.reloadData()
      this.$refs.materialsAddRef.tableDisabled = false
      this.$refs.materialsAddRef.dialogVisible = true
      // this.$refs.materialsAddRef.reloadData()
    },
    // 导出
    exportExcel (flag) {
      let ids = []
      if(this.batchData.length){
        this.batchData.forEach((item) => {
          ids.push(item.id)
        })
      }
      let params = {
        ...this.queryData,
        flag,
        // accountBookId:accountBookId,
        ids:ids.toString(),
        fileName: '客户物料编码'
      }
        
      this.handleExportXlsByStaff('客户物料编码', params)
    },
    // 刷新
    onRefresh () {
      Object.assign(this.$data, this.$options.data())
      this.getData()
    },
    // 打开新增客户弹出框
    onShowSupplierAdd () {
      this.$refs.supplierAddRef.dialogVisible = true
    },
    // 新增客户数据
    onAddSupplier (res) {
      // 先清空新增客户时的数据
      // 把当前新增值的客户名称展示在输入框内,做数据存储
      this.onSelectSupplier(res)
      // 调用子组件的数据更新方法
      this.$refs.supplierRef.getData()
      this.getGysStorage()
    },
    // 打开选择客户弹出框
    onShowSupplier () {
      this.$refs.supplierRef.openDialog()
    },
    // 当前选择客户数据
    onSelectSupplier (val) {
      console.log("val1",val)
      this.queryData.companyId = val.id
      this.queryData.companyName = val.companyName
      this.queryData.companyNumber = val.companyNumber
    },
    // 打开新增仓库的弹框
    onShowWhAdd () {
      this.$refs.warehouseAddRef.dialogVisible = true
    },
    // 触发列配置弹框
    onShowColumn () {
      this.defaultColumnData = this.$options.data().columnData
      this.$refs.setColumnRef.dialogVisible = true
    },
    // 获取每页几条数据
    handleSizeChange (val) {
      this.pagesize = val
      this.getTableData()
    },
    // 获取当前第几页
    handleCurrentChange (val) {
      this.currentPage = val
      this.getTableData()
    },
    // 历史记录数据去重并只展示三个数据方法
    selectDataHas (arr) {
      let map = new Map()
      for (const item of arr) {
        if (!map.has(item.id)) {
          map.set(item.id, item)
        }
      }
      let newArr = [...map.values()]
      return newArr.slice(0, 3)
    },
    // 搜索
    handleFilterMethod (value, label) {
      console.log("@@@@@@@",value)
      console.log("******",label)
      if (label == 'companyName') {
        console.log("this.gysOptions1111",this.gysOptions)
        this.gysOptions = this.filterMethod(this.gysOptions, value, label)
        console.log("this.gysOptions",this.gysOptions)
      } else if (label == 'storehouseName') {
        this.ckOptions = this.filterMethod(this.ckOptions, value, label)
      } else if (label == 'realname') {
        this.jsrOptions = this.filterMethod(this.jsrOptions, value, label)
      }
    },
  },
}
</script>

<style lang="scss" scoped>
::v-deep .dialog_middle{
  .confirm_text{
    font-size: 16px !important;
  }
}
::v-deep .info_operation_btn{
.btn_right{
.el-input{
  width: 150px !important;
}
.normal-input{
  width: 250px !important;
}
}
}  
.bianji{
  color: #1A93FA;
  cursor: pointer;
}
.basic_info {
  width: 100%;
  height: calc(100vh - 102px);
  background: #f0f2f5;
  box-sizing: border-box;
  padding: 0 0.168761rem 0.168761rem;
  display: flex;
  flex-direction: column;
}

.info_operation_btn {
  width: 100%;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .el-button {
    width: 70px;
    height: 30px;
    text-align: center;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    border-radius: 5px;
    border: none;
    margin-right: 6px;
  }

  .el-button--default {
    color: #666;
  }

  .btn_left {
    // width: 30%;
    display: flex;
    justify-content: flex-start;
    align-items: center;

    p {
      font-size: 12px;
      color: #666;
      margin: 0 0.1rem 0 0.187512rem;
    }

    ::v-deep .el-checkbox {
      margin-right: 1px;

      .el-checkbox__label {
        font-size: 12px;
        padding-left: 0.1rem;
      }
    }

    ::v-deep .el-select {
      width: 70px;
      height: 40px;
      box-sizing: border-box;
      margin-right: 0.187512rem;

      .el-input {
        .el-input__inner {
          height: 40px;
          border: none;
          font-size: 12px;
        }

        .el-input__suffix {
          height: 40px;
          display: flex;
          align-items: center;
        }
      }
    }

    .selectSty {
      width: 2.625164rem;
    }
  }

  // .btn_center{
  //   width: 40%;
  //   display: flex;
  //   align-items: center;
  //   justify-content: flex-start;
  // }

  .btn_right {
    // width: 70%;
    display: flex;
    justify-content: flex-end;
    align-items: center;

    .el-input {
      width: 250px;
      height: 30px;
      margin-right: 0.112507rem;

      ::v-deep .el-input__inner {
        height: 30px;
        border: none;
        box-sizing: border-box;
        padding: 0 0.15rem;
        background: #fff;
        font-size: 12px;
        color: #666;

        &::placeholder {
          font-size: 12px;
          color: #c1c1c1;
        }
      }
    }

    .set_up {
      font-size: 23px;
      color: rgb(153, 153, 153);
    }
  }
}

.info_content_div {
  width: 100%;
  height: calc(100% - 60px);
  background: #fff;
  box-sizing: border-box;
  padding: 10px;
  display: flex;

  .div_table {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    // justify-content: space-between;
    transition: all 0.3s;

    .div_screen {
      width: 100%;
      // height: 100px;
      margin-bottom: 10px;
      display: flex;
      justify-content: space-between;

      .screen_left {
        font-size: 12px;
        box-sizing: border-box;
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;
        min-width: 600px;

        .tips{
        font-weight: 400;
        font-size: 12px;
        color: #1A93FA;
        margin: 5px 10px;
      }
      }

      .screen_right {
        .right_top {
          margin-right: 20px;
          box-sizing: border-box;
          display: flex;
          justify-content: flex-end;
          align-items: center;
          box-sizing: border-box;
          padding-top: 10px;
        }

        ::v-deep .el-button {
          // width: 60px;
          height: 30px;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 12px;
          border-radius: 5px;
          border: none;
        }

        ::v-deep .el-select {
          width: 80px;
          margin: 0 10px;

          .el-input {
            .el-input__inner {
              height: 30px;
              border-color: #e3e3e3;
              font-size: 12px;
              padding-left: 5px;
            }

            .el-input__suffix {
              height: 30px;
              display: flex;
              align-items: center;
            }
          }
        }

        ::v-deep .el-date-editor {
          width: 220px;
          height: 30px;
          background: #ffffff;
          border: 1px solid #d9d9d9;
          margin-right: 0.112507rem;
          padding: 3px 6px;

          .el-range__icon {
            position: absolute;
            right: 0;
            line-height: 30px;
          }

          .el-range-separator {
            line-height: 24px;
          }

          .el-range-input {
            font-size: 12px;
          }

          .el-range__close-icon {
            display: none;
          }
        }
      }
    }

    .table_content {
      height: calc(100% - 150px);

      ::v-deep .el-table {
        border: 1px solid #e3e3e3;
        border-bottom: none;
        box-sizing: border-box;
        height: 100%;

        th,
        td {
          padding: 0;
          color: #666;
          box-sizing: border-box;
          border-right: 1px solid #e3e3e3;

          .cell {
            height: 50px;
            display: flex;
            align-items: center;
            font-size: 12px;
          }

          &:first-child {
            .cell {
              justify-content: center;
              padding: 0;
            }
          }

          &:nth-child(2) {
            .cell {
              justify-content: center;
            }
          }

          &:last-child {
            .cell {
              justify-content: center;
            }
          }
        }

        th {
          .cell {
            background: #ededed;
            justify-content: center;
          }
        }

        .el-checkbox {
          .is-indeterminate {
            .el-checkbox__inner {
              color: #1b93f9;
              background-color: #1b93f9;
              border-color: #1b93f9;
            }
          }
        }

        .el-icon-edit-outline {
          font-size: 0.25rem;
          color: #1b93f9;
          margin-right: 0.037502rem;
        }

        .el-icon-delete {
          font-size: 0.25rem;
          color: #ff2626;
          margin-left: 0.037502rem;
        }

        .el-table__body tr:hover > td {
          background: #e3f6ff;
        }

        .el-table__footer-wrapper {
          td {
            background: #f4f4f4;
            border: none;
          }
        }

        //滚动条的宽度
        ::-webkit-scrollbar {
          width: 8px;
          height: 10px;
          background-color: #e5e5e5;
        }

        //滚动条的滑块
        ::-webkit-scrollbar-thumb {
          background-color: #c9c9c9;
        }
      }
    }
    .total_record {
      width: 100%;
      height: 30px;
      box-sizing: border-box;
      padding: 0 0.25rem;
      border: 1px solid #e3e3e3;
      border-top: none;
      background: #f4f4f4;
      display: flex;

      p {
        margin: 0;
        line-height: 30px;
        padding-right: 0.25rem;
        font-size: 12px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #666666;
      }
    }

    .table_pagination {
      .total {
        margin-top: 0.25rem;
        width: 3.750234rem;
        font-size: 12px;
        color: #666666;
      }

      width: 100%;
      height: 50px;
      box-sizing: border-box;
      padding: 10px 0;
      display: flex;

      .pagination_div {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: flex-end;

        ::v-deep .el-pagination {
          padding: 0;
          height: 30px;

          .el-pagination__sizes {
            margin: 0;

            .el-input {
              margin-right: 0;
            }
          }
        }
      }
    }
  }
}

.custom_item {
  display: flex;
  align-items: center;
  margin: 10px 10px 10px 0;
//   width: 180px;
  font-size: 12px;
}

.item_title {
  white-space: nowrap;
  padding: 0 5px;
  width: auto;
  min-width: 60px;
  line-height: 30px;
  color: #666666;
  text-justify: distribute-all-lines;
  /*ie6-8*/
  text-align-last: justify;
  /* ie9*/
  -moz-text-align-last: justify;
  /*ff*/
  -webkit-text-align-last: justify;
  /*chrome 20+*/
}

.custom_select_head {
  flex: 1;
  height: 30px;
  position: relative;

  ::v-deep .el-select {
    .el-input {
      .el-input__inner {
        height: 30px;
        border-color: #e3e3e3;
        font-size: 12px;
        padding-left: 5px;
      }

      .el-input__suffix {
        height: 30px;
        display: flex;
        align-items: center;
      }
    }
  }

  ::v-deep .el-input {
    width: 100%;

    .el-input__inner {
      height: 30px;
      border-color: #e3e3e3;
      font-size: 12px;
      padding-left: 5px;
    }

    .el-input__suffix {
      height: 30px;
      display: flex;
      align-items: center;
    }
  }
}

.custom_more {
  position: absolute;
  right: 10px;
  z-index: 10;
  top: 1px;
  background: #fff;
  height: 28px;
  display: flex;
  align-items: center;
  color: #bfbfbf;
}

.custom_add {
  display: flex;
  justify-content: center;
  align-items: center;

  span {
    margin-left: 5px;
    color: #666666;
  }

  i {
    color: #666666;
  }
}

.disabled_button {
  background: #cbced3 !important;
  color: #666 !important;
}
</style>